<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>实用jQuery省市区城市级联下拉菜单选择插件jQuery cxSelect - JS代码网</title>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/layout.css">
</head>
<body>
<div class="wrap">
	<div class="side">
		<div class="logo">
			<a href="http://www.js-css.cn" target="_blank">省市区城市联动下拉选择</a>			
		</div>		
		<dl class="nav">
			<dt>示例</dt>
			<dd class="n"><a href="index.html">国内省市区联动</a></dd>
			<dd><a href="index2.html">全球主要国家城市联动</a></dd>			
		</dl>
	</div>
	<div class="main">
		<div class="inwrap">
			<h1>jQuery cxSelect 城市多级联动下拉菜单</h1>
			<h2>国内省市区联动</h2>

			<div class="example">
				<fieldset id="city_china">
					<legend>默认</legend>
					<p>省份：<select class="province cxselect" disabled="disabled" name="province"></select></p>
					<p>城市：<select class="city cxselect" disabled="disabled" name="city"></select></p>
					<p>地区：<select class="area cxselect" disabled="disabled" name="area"></select></p>
				</fieldset>
			
				<fieldset id="city_china_val">
					<legend>设置默认值及选项标题</legend>
					<p>所在地区：
						<select class="province cxselect" data-value="浙江省" data-first-title="选择省" disabled="disabled"></select>
						<select class="city cxselect" data-value="杭州市" data-first-title="选择市" disabled="disabled"></select>
						<select class="area cxselect" data-value="西湖区" data-first-title="选择地区" disabled="disabled"></select>
					</p>
				</fieldset>
			</div>
			
		</div>
	</div>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.cxselect.min.js"></script>
<script>
$.cxSelect.defaults.url = 'js/cityData.min.json';

$('#city_china').cxSelect({
	selects: ['province', 'city', 'area']
});

$('#city_china_val').cxSelect({
	selects: ['province', 'city', 'area'],
	nodata: 'none'
});
</script>
</body>
</html>